<!--
 * @Descripttion: 
 * @version: 
 * @Author: 刘译蓬
 * @Date: 2022-11-02 14:40:00
 * @LastEditors: 刘译蓬
 * @LastEditTime: 2022-11-03 14:03:34
-->
<template>
  <div class="gui" @dblclick="changeState()" v-show="state !== 2">
    <el-button
      type="primary"
      size="default"
      @click="getp(), changeState()"
      v-show="state === 0"
    >
      点击授权并开始
    </el-button>
    <el-card
      shadow="hover"
      :body-style="{ padding: '20px' }"
      v-show="state === 1"
    >
      <template #header>
        <div>
          <span>控制面板</span>
        </div>
      </template>
      <br />
      <span>宽容度：</span>
      <el-slider
        v-model="tolerance"
        :min="5"
        :max="100"
        :format-tooltip="formatTooltip"
      />
      <span>颜色：</span>
      <br />
      <el-color-picker v-model="mattingColor" />
    </el-card>
  </div>
  <canvas
    class="babylonCanvas"
    ref="babylonCanvas"
    @dblclick="changeState()"
  ></canvas>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { fullScreen } from "./assets/fullScreen";
import { getIPhonePermission } from "./assets/getIPhonePermission";
import { isIPhone } from "./assets/isIphone";
import MyBabylon from "./assets/MyBabylon";
// page
const state = ref(0); // 0 未开始，1显示gui，2，隐藏gui
function changeState() {
  state.value = state.value === 1 ? 2 : 1;
}
// MyBabylon
const babylonCanvas = ref();
let babylonInstance: MyBabylon;
function initBabylon() {
  babylonInstance = new MyBabylon(babylonCanvas.value);
  babylonInstance.scene.registerBeforeRender(() => {
    if (babylonInstance.video && babylonInstance.video.tolerance) {
      babylonInstance.video.tolerance = tolerance.value / 100;
    }
  });
}
// toleranceSlider
const tolerance = ref(0.5);
const formatTooltip = (val: number) => {
  return val / 100;
};
// mattingColor
const mattingColor = ref("#409FFE");
watch(mattingColor, (mattingColor) => {
  babylonInstance.video.chromaKey.x = colorRgb(mattingColor)[0];
  babylonInstance.video.chromaKey.y = colorRgb(mattingColor)[1];
  babylonInstance.video.chromaKey.z = colorRgb(mattingColor)[2];
  console.log(colorRgb(mattingColor));
});
// 转色
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
function colorRgb(sHex: string): number[] {
  let sColor = sHex.toLowerCase();

  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      let sColorNew = "#";

      for (let i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
      }

      sColor = sColorNew;
    } //处理六位的颜色值

    const sColorChange: number[] = [];

    for (let i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)) / 255);
    }

    return sColorChange;
  } else {
    console.log("Error,sHex not a colorString...");
    return [0, 0, 0];
  }
}
//获取权限并开始
function getp() {
  console.log(isIPhone());

  if (isIPhone()) {
    getIPhonePermission(() => {
      fullScreen();
      initBabylon();
    });
  } else {
    fullScreen();
    initBabylon();
  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
  user-select: none;
}
.babylonCanvas {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}
.gui {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 500px;
  z-index: 10;
}
</style>
